<template>
  <div>
    <ul class="module-attr-tab">
      <li
        v-for="(item, index) in tab"
        :class="cur === index ? 'on' : ''"
        @click="cur = index"
      >
        {{ item.name }}
      </li>
    </ul>
    <!--基础设置-->
    <template v-if="cur == 0">
      <div class="attr-con-item">元件设置</div>
      <div class="att-con-box">
        <div class="attr-nav-item">
          <div class="att-con-pd">
            <AttrImg :item="attr" />
            <AttrLink :link="attr.link" :isShow="true" />
            <div class="item item2">
              <div class="tit mg">图片大小：</div>
              <div class="input">
                <el-slider v-model="attr.imgSize"></el-slider>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!--样式设置-->
    <template v-if="cur == 1">
      <div class="att-con-box">
        <div class="att-con-pd">
          <!-- <AttrText :text="attr.title" /> -->
          <AttrBase :base="attr.base" />
          <!-- <AttrText :text="attr.note" :edit="false" /> -->
          <div class="item">
            <div class="tit">模块间隙：</div>
            <div class="input">
              <div class="input-line">
                <span class="sp1">
                  <input
                    class="radio"
                    :name="attr.base.m"
                    :checked="!attr.base.m"
                    @click="attr.base.m = false"
                    type="radio"
                  />
                  隐藏
                </span>
                <span class="sp1">
                  <input
                    class="radio"
                    :name="attr.base.m"
                    :checked="attr.base.m"
                    @click="attr.base.m = true"
                    type="radio"
                  />
                  显示
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import AttrImg from "@/views/attr/img.vue";
import AttrLink from "@/views/attr/link.vue";
import module from "@/util/module.js";
export default {
  name: "AttrTuwen",
  props: ["attr"],
  components: {  AttrImg, AttrLink },
  data() {
    return {
      tab: [
        { name: "基础设置", content: "" },
        { name: "样式设置", content: "" },
      ],
      cur: 0,
    };
  },

  methods: {},
};
</script>

<style></style>
